<template>
  <div class="tab">
    <div class="w-100 d-flex flex-warp justify-space-around con">
      <!-- 图片每一项 -->
      <div
        class="item d-flex flex-direction-column"
        v-for="item in list.reverse()"
        :key="item.iid"
        @click="todetail(item.shop_id)"
      >
        <!-- 图片 -->
        <van-image class="img" :src="item.image">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>

        <div>
          <!-- 商品标题 -->
          <p class="omitted title">{{ item.title }}</p>
          <p class="price text-center">
            <span>{{ item.price }}</span>
            <van-icon class="icon" name="star-o" />
            {{ item.itemLikes }}
          </p>
        </div>
      </div>
    </div>
    <!-- 占位符 -->
    <div style="height:44px"></div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { recommend } from "@/utils/http.js";
import { Notify } from "vant";
export default {
  setup(props) {
    const state = reactive({
      list: [],
    });
    const todetail = (id) => {
      // router.push("/detail/" + id);
      // store.commit("setstatus", false);
      Notify("暂无数据");
    };
    // 获取热门推荐数据
    const getrecommend = async () => {
      const { data: res } = await recommend();
      state.list = res.data.list;
    };
    getrecommend();
    return {
      ...toRefs(state),
      todetail,
    };
  },
};
</script> 

<style scoped lang="scss">
.tab {
  margin-bottom: 44px;
}
.item {
  width: 47.5%;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin: 5px;
}
.title {
  font-size: 12px;
  color: #666666;
  padding: 0 5px;
}
/* 价格 */
.price {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  span {
    color: #ff8198;
  }
  .icon {
    margin-left: 5px;
  }
}
.img {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.img .van-image__img {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
</style>